<template>
  <input
    @blur="blurFn"
    v-bind:value="value"
    @input="inputFn"
    class="hmInput"
    :[attr]="{ success: isOk, error: !isOk }"
    type="text"
  />
</template>


<script>
export default {
  data() {
    return {
      isOk: null,
      attr: "",
    };
  },
  props: {
    //   接收使用组件的时候，前面传递过来的数据
    value: [String, Number],
    reg: {
      type: RegExp,
      default: () => {
        return /^.{1,}$/;
      },
    },
  },
  methods: {
    blurFn() {
      // 失去焦点的时候，才给attr加上class
      this.attr = "class";
      console.log(14, this.value);
      //   声明一个正则表达式
      //   const reg = /^1[3,4,5,6,7,8,9]\d{9}$/;
      if (this.reg.test(this.value)) {
        this.isOk = true;
      } else {
        this.isOk = false;
      }
    },
    // input事件（时时获取表单的数据）
    inputFn(e) {
      console.log(46, e.target.value);
      //   子传父亲，时时更新父组件的数据
      this.$emit("input", e.target.value);
    },
  },
  //   打开页面的时候，就应该监测isOk是那种属性，更具实际给其请求数据
  //为的是，当有数据缓存到表单上的时候，也能够监测到数据，与其检测，然后再去请求数据
  created() {
    if (this.reg.test(this.value)) {
      this.isOk = true;
    } else {
      this.isOk = false;
    }
  },
};
</script>


<style lang="less" scoped>
.hmInput {
  width: 100%;
  border: none;
  border-bottom: 1px solid #666;
  color: #666;
  line-height: 2;
  font-size: 16px;
}
.success {
  border-color: green;
  color: green;
}
.error {
  border-color: red;
  color: red;
}
</style>